<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入样式 -->
    <title>管理员界面</title>
    <style>
        .el-header, .el-footer {
            background-color: #e6a71f;
            color: whitesmoke;
            text-align: center;
            height:auto;
        }

        .el-aside {
            text-align: center;
            overflow: hidden;
        }

        .el-main {
            color: #333;
            text-align: center;
        }

        html,
        body,
        #container {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container style="width:100%;margin:30px auto;">
        <el-aside style="width: 15%">
            <el-menu
                    default-active="2-1"
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b">
                <el-submenu index="1" unique-opened="true">
                    <template slot="title">
                        <i class="el-icon-document"></i>
                        <span>管理员信息</span>
                    </template>
                    <el-menu-item-group>
                        <template slot="title">查看</template>
                        <el-menu-item index="1-1" >管理员明细</el-menu-item>
                        <el-menu-item index="1-2" >管理员信息修改</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title"><i class="el-icon-s-custom"></i>
                        <span>用户信息</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="2-1" @click="viewAll">用户列表查看</el-menu-item>

                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="3">
                    <template slot="title"><i class="el-icon-box"></i>
                        <span>快递信息</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="3-1" >快递明细</el-menu-item>
                        <el-menu-item index="3-2" >物流轨迹</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="4">
                    <template slot="title"><i class="el-icon-receiving"></i>
                        <span>仓库管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="4-1" >仓储明细</el-menu-item>
                        <el-menu-item index="4-2" >信息修改</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="5">
                    <template slot="title"><i class="el-icon-date"></i>
                        <span>取派管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="5-1" >取派标准</el-menu-item>
                        <el-menu-item index="5-2" >取派时间</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="6">
                    <template slot="title"><i class="el-icon-truck"></i>
                        <span>车辆管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="6-1" >车辆明细</el-menu-item>
                        <el-menu-item index="6-2" >信息修改</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="7">
                    <template slot="title"><i class="el-icon-user-solid"></i>
                        <span>物流人员管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="7-1" >物流人员明细</el-menu-item>
                        <el-menu-item index="7-2" >信息修改</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="8">
                    <template slot="title"><i class="el-icon-s-finance"></i>
                        <span>财务管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="8-1" >物流人员明细</el-menu-item>
                        <el-menu-item index="8-2" >信息修改</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="9">
                    <template slot="title"><i class="el-icon-data-analysis"></i>
                        <span>报表分析</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="9-1" >物流运输统计</el-menu-item>
                        <el-menu-item index="9-2" >收付款统计</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </el-menu>
        </el-aside>
        <el-container>
            <el-header>
                <h2>极兔物流管理系统&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <span style="text-align:right;font-size: 20px">&nbsp;&nbsp;&nbsp;&nbsp;managername</span>
                    <el-dropdown>
                        <i class="el-icon-setting" style="margin-right: 15px"></i>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>查看</el-dropdown-item>
                            <el-dropdown-item>修改</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </h2>
            </el-header>

            <!-- 显示内容 -->
            <el-main>
                <router-view>
                    <template id="map">
                        <div id="container"></div>
                    </template>
                </router-view>
            </el-main>
        </el-container>
    </el-container>
</div>

<!-- 组件的template -->
<template id="viewAll">
    <div class="data">
        <!-- 输入框 -->
        <el-input
                style="width:50%;margin-bottom: 10px"
                placeholder="请根据姓名输入搜索内容"
                v-model="query"
                @change="search"
                clearable>
        </el-input>

        <!-- 数据单向绑定  :data表格数据 -->
        <el-table :data="tableData" border>
            <!-- prop属性  与此处数据的属性一致 -->
            <el-table-column prop="name"   label="姓名" width="120" ></el-table-column>
            <el-table-column prop="loginName"   label="昵称" width="120" ></el-table-column>
            <el-table-column prop="age"    label="年龄" width="85" ></el-table-column>
            <el-table-column prop="gender" label="性别" width="85" ></el-table-column>
            <el-table-column prop="birthday" label="生日" width="200" :formatter="formatDate"></el-table-column>
            <el-table-column prop="phonenumber" label="电话" width="200" ></el-table-column>
            <el-table-column prop="address" label="地址" width="200" ></el-table-column>
            <!--<el-table-column label="操作" width="100">
                <template slot-scope="scope">
                    <el-button type="primary" size="small" icon="el-icon-edit"   circle @click="update(scope.row.id)" ></el-button>
                    <el-button type="danger"  size="small" icon="el-icon-delete" circle @click="del(scope.row.id)" ></el-button>
                </template>
            </el-table-column>-->
        </el-table>

        <!-- 分页  :属性="" 单向数据绑定 -->
        <el-pagination
                :current-page="current"
                :page-size="limit"
                :total="total"
                style="padding:30px 0; margin-top:20px; text-align: center;"
                layout="prev, pager, next"
                @current-change="getUserList"
        />
    </div>
</template>

<!-- 组件的template -->
<!--<template id="viewOne">
    <div style="width:50%;margin:10px auto;">
        <h1 align="center">修改界面</h1>

        <el-form ref="form" :model="usermodel" label-width="80px">
            <el-form-item label="编号" hidden="hidden">
                <el-input v-model="usermodel.id"></el-input>
            </el-form-item>
            <el-form-item label="姓名">
                <el-input placeholder="请输入姓名" v-model="usermodel.name"></el-input>
            </el-form-item>
            <el-form-item label="昵称">
                <el-input placeholder="请输入昵称" v-model="usermodel.loginName"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input placeholder="请输入密码" v-model="usermodel.password" show-password></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-radio-group v-model="usermodel.gender">
                    <el-radio label="男"></el-radio>
                    <el-radio label="女"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="生日">
                <el-date-picker
                        v-model="usermodel.birthday"
                        type="date"
                        format="yyyy年MM月dd日"
                        placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="电话">
                <el-input placeholder="请输入电话" v-model="usermodel.phonenumber"></el-input>
                </el-upload>
            </el-form-item>
            <el-form-item label="地址">
                <el-input placeholder="请输入地址" v-model="usermodel.address"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="update">更新</el-button>
                <el-button @click="back">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template >-->



<!--引入高德key-->
<script src="https://webapi.amap.com/maps?v=1.4.15&key=8024e336aa5f3f36351234674acbe550"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios@1.1.2/dist/axios.min.js"></script>
<!-- 1.引入路由的组件 -->
<script src="https://unpkg.com/vue-router@3.6.5/dist/vue-router.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="../js/date.js"></script>
<script>

    //2.定义Vue组件
    let viewMap =new AMap.Map('container', {
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom: 12, //初始地图级别
        center: [121.498586, 31.239637], //初始地图中心点
        showIndoorMap: false, //关闭室内地图
        template:"#viewMap"
    });




    let viewAll  = {
        data: function(){
            return {
                tableData:[],   //记录表格中所有数据
                current:0,      //当前页码
                limit:3,        //每页展示记录数
                total:0,        //总记录数
                query:''        //查询条件
            }
        },
        created(){
            this.getUserList()
        },
        methods: {
            search(){
                this.getUserList()
            },
            //若没有传递当前页码 ， 默认展示第一页
            getUserList(page=1){
                this.current = page
                axios.get(`viewAll?current=${this.current}&query=${this.query}`)
                    .then(response=>{  //response.data.data 等价于 Map 有PageInfo&query
                        console.log(response)
                        this.tableData = response.data.data.pageInfo.list
                        this.current = response.data.data.pageInfo.pageNum
                        this.total = response.data.data.pageInfo.total
                        this.query = response.data.data.query
                    })
                    .catch(error=>{
                        console.log(error)
                    })
            },
            /*update(id){
                //在地址栏中会显示id编号
                this.$router.push({path:'/viewOne' , query:{"id":id}})
            },
            del(id){
                axios.delete(`delete/${id}`)
                    .then(response=>{
                        let code = response.data.code
                        let msg = response.data.msg
                        if(code==200){
                            this.$message({showClose: true,message: msg,type: 'success'});
                            //跳转查询用户列表组件
                            this.getUserList()
                        }else{
                            this.$message({showClose: true,message: msg,type: 'error'});
                        }
                    })
            },*/
            formatDate(row, column){
                let data = row[column.property]
                if(data == null) {
                    return null
                }
                let date = new Date(data);
                var o = {
                    "M+" : date.getMonth()+1,                 //月份
                    "d+" : date.getDate(),                    //日
                    "h+" : date.getHours(),                   //小时
                    "m+" : date.getMinutes(),                 //分
                    "s+" : date.getSeconds(),                 //秒
                    "q+" : Math.floor((date.getMonth()+3)/3), //季度
                    "S"  : date.getMilliseconds()             //毫秒
                };
                //var fmt = "yyyy-MM-dd hh:mm:ss";
                var fmt = "yyyy-MM-dd";
                if(/(y+)/.test(fmt)) {
                    fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length));
                }
                for(var k in o) {
                    if(new RegExp("("+ k +")").test(fmt)){
                        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
                    }
                }
                return fmt ;
            }
        },
        template:"#viewAll"
    }

    /*let viewOne  = {
        data:function(){
            return {
                usermodel:{
                    name:'',
                    loginName:'',
                    password:'',
                    age:'',
                    gender:'',
                    birthday:'',
                    phonenumber:'',
                    address:''
                }

            }
        },
        /!*created(){
            //获取路由中的id用户编号
            let id = this.$route.query.id
            axios.get(`viewOne/${id}`)
                .then(response=>{
                    let code = response.data.code
                    let msg = response.data.msg
                    if(code==200){  //response.data.data 等价于 User
                        this.usermodel = response.data.data
                        //渲染用户头像

                    }else{
                        this.$message({showClose: true,message: msg,type: 'error'});
                    }
                })
                .catch(error=>{
                    console.log(error)
                })
        },*!/
        methods: {

            update(){
                //收集二进制表单数据
                let formData = new FormData();
                //遍历迭代对象中所有的key/value
                for(let key in this.usermodel){
                    formData.append(key , this.usermodel[key])
                }
                //处理事件时间格式
                this.usermodel.birthday = new Date(this.usermodel.birthday).Format("yyyy-MM-dd")
                formData.set("birthday" , this.usermodel.birthday)
                //发起更新的axios请求
                axios.put('update' , formData)
                    .then(response=>{
                        let code = response.data.code
                        let msg = response.data.msg
                        if(code==200){
                            this.$message({showClose: true,message: msg,type: 'success'});
                            //跳转查询列表的组件
                            this.$router.push({"path":"/viewAll"})
                        }else{
                            this.$message({showClose: true,message: msg,type: 'error'});
                        }
                    })
                    .catch(error=>{
                        console.log(error)
                    })
            },
            back(){
                this.$router.back()
            }
        },
        template:"#viewOne"
    }*/







    //3.定义路由
    let rt = new VueRouter({
        routes: [
            {
                path: "/viewAll",
                component: viewAll,
            },
            {
                path:"/viewMap",
                component: viewMap,
            }
        ]
    });


    new Vue({
        el: '#app',
        router: rt,
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },

            viewAll(){
                //跳转组件
                //获取原型对象上的push函数
                const originalPush = VueRouter.prototype.push
                //修改原型对象中的push方法
                VueRouter.prototype.push = function push(location) {
                    return originalPush.call(this, location).catch(err => err)
                }

                this.$router.push({path:'/viewAll'})
            },
            viewMap(){
                this.$router.push({path:'/viewMap'})
            }
            /*viewOne(){
                //方式一
                //传递参数 this.$router.push({path: '路由', query:{key: value}})   使用这种方式，传递参数会拼接在路由后面，出现在地址栏
                //参数取值 this.$route.query.key
                this.$router.push({path:'/viewOne'})
                //方式二
                //传递参数 this.$router.push({name: '路由的name', params:{key: value}}) 使用这种方式，参数不会拼接在路由后面，地址栏上看不到参数
                //参数取值 this.$route.params.key
            }*/

        }
    })
</script>


</body>

</html>